<template>
	<view class="fui-wrap">
		<fui-nav-bar background="#43afe8">
			<view class="top">
				<image v-if="app.logo_white" :src="`${app.logo_white}`" mode="heightFix"></image>
				<fui-text :text="app.sitename" color="#fff" :size="38" font-weight="bold"></fui-text>
			</view>
		</fui-nav-bar>
		<fui-banner-arc height="300" background="#43afe8"></fui-banner-arc>
		<view class="container">
			<view class="menu">
				<view class="item" @click="$navigateTo('index/plate?type=parking')">
					<image :src="`${baseUrl}assets/img/miniapp/entry.png`" style="width: 60rpx;height: 60rpx;" mode="widthFix"></image>
					<fui-text text="临停缴费" color="#000" :size="24"></fui-text>
				</view>
				<view class="item" @click="$navigateTo('index/plate?type=monthly_renew')">
					<image :src="`${baseUrl}assets/img/miniapp/monthly.png`" style="width: 60rpx;height: 60rpx;" mode="widthFix"></image>
					<fui-text text="月卡充值" color="#000" :size="24"></fui-text>
				</view>
				<view class="item" @click="$navigateTo('index/plate?type=stored_renew')">
					<image :src="`${baseUrl}assets/img/miniapp/stored.png`" style="width: 60rpx;height: 60rpx;" mode="widthFix"></image>
					<fui-text text="储值卡充值" color="#000" :size="24"></fui-text>
				</view>
				<view class="item" @click="$navigateTo('index/invoice')">
					<image :src="`${baseUrl}assets/img/miniapp/fapiao.png`" style="width: 60rpx;height: 60rpx;" mode="widthFix"></image>
					<fui-text text="发票助手" color="#000" :size="24"></fui-text>
				</view>
			</view>
			<fui-card :src="`${baseUrl}assets/img/miniapp/mycar.png`" title="我的车辆" width="50" height="50">
				<view class="car" v-if="mycar.length===0">
					<fui-empty :src="`${baseUrl}assets/img/miniapp/empty.png`" width="228" height="124" :marginTop="30">
						<fui-button @click="addCars" text="+添加车辆" :size="28" width="280rpx" height="60rpx" radius="80rpx" background="#fff" :margin="['34rpx','0']" borderColor="#b8b8b8" color="#b8b8b8"></fui-button>
					</fui-empty>
				</view>
				<fui-swiper-dot v-else :styles="{width:12,height:12,activeWidth:24,bottom:10}" :items="mycar" :current="current">
					<swiper class="car" @change="change"  :indicator-dots="false" autoplay :interval="5000" :duration="150">
						<swiper-item v-for="(item,index) in mycar" :key="index">
							<view class="car-item" v-if="item.records">
								<fui-text fontWeight="800" :text="item.plate_number" color="#000" :size="28"></fui-text>
								<fui-text :text="item.records.parking_title" color="#787878" :size="28" block></fui-text>
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<fui-text :text="item.records.entry_time+'入场'" color="#787878" :size="28"></fui-text>
									<fui-text :text="'￥'+countTotalFee(item.records)" color="#eec728" :size="42"></fui-text>
								</view>
								<fui-button @click="$navigateTo(`index/parking?records_id=${item.records.id}`)" v-if="item.records.total_fee-item.records.activities_fee-item.records.pay_fee>0" text="去缴费" :size="28"  height="60rpx"></fui-button>
								<fui-button type="success" v-else :disabled="true" :text="countTotalText(item.records)" :size="28"  height="60rpx"></fui-button>
							</view>
							<view class="car-item" v-else>
								<fui-text fontWeight="800" :text="item.plate_number" color="#000" :size="28"></fui-text>
								<fui-empty :src="`${baseUrl}assets/img/miniapp/empty.png`" width="228" height="124" :marginTop="10">
									<view style="display: flex;">
										<fui-text text="未查询到入场信息，点击" color="#b1b1b1" :size="28"></fui-text>
										<fui-text style="margin-left: 4rpx;" @click="getInfo" text="刷新" color="#13b0c8" :size="28" decoration="underline"></fui-text>
									</view>
								</fui-empty>
							</view>
						</swiper-item>
					</swiper>
				</fui-swiper-dot>
			</fui-card>
			<view class="aboutus">
				<view class="title">关于我们</view>
				<view class="content">
					<fui-text :text="`${app.sitename}，专注于为城市提供智能停车解决方案，融合物联网、大数据、云计算等前沿技术，实现停车资源的智能化管理与服务。我们致力于提升停车效率，降低管理成本，为车主带来便捷停车体验。`" color="#000" :size="28"></fui-text>
				</view>
				<!-- #ifndef MP-ALIPAY -->
				<view class="hezuo">
					<view>
						<fui-text text="👉👉" color="#000" :size="32"></fui-text>
						<fui-text text="停车场加盟点这里️️" color="#000" :size="32" decoration="underline" @click="makePhone(app.parking_entry_phone)"></fui-text>
					</view>
					<view>
						<fui-text text="👉👉" color="#000" :size="32"></fui-text>
						<fui-text text="合作代理点这里️️" color="#000" :size="32" decoration="underline" @click="makePhone(app.agent_phone)"></fui-text>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="kefu" >
				<button @click="gokefu">
					<image :src="`${baseUrl}assets/img/miniapp/mykefu.png`"></image>
				</button>
				<view>客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {parseNumber} from '@/utils/util.js';
	export default {
		data() {
			return {
				baseUrl:baseUrl,
				current: 0,
				app:{},
				mycar: []
			}
		},
		onLoad() {
			this.getInfo();
		},
		onShow() {
			let parking=uni.getStorageSync('parking') || '';
			let showparking=uni.getStorageSync('showparking-time') || '';
			if(showparking && ((new Date()).getTime()-showparking)<1000*60*5){
				return;
			}
			if(parking){
				uni.showModal({
					content:'检测到您是停车场管理员，是否跳转到车场管理界面',
					success: (e) => {
						if(e.confirm){
							this.$reLaunch('parking/index');
						}
					}
				});
				uni.setStorageSync('showparking-time',(new Date()).getTime());
				return;
			}
			let merchant=uni.getStorageSync('merchant') || '';
			if(merchant){
				uni.showModal({
					content:'检测到您是商户管理员，是否跳转到商户管理界面',
					success: (e) => {
						if(e.confirm){
							this.$reLaunch('merchant/index');
						}
					}
				});
				uni.setStorageSync('showparking-time',(new Date()).getTime());
				return;
			}
		},
		methods: {
			...methods,
			getInfo:function(){
				this.$get('index/info','',true).then(res=>{
					this.app=res.app;
					this.mycar=res.mycar;
				});
			},
			gokefu:function(){
				this.$navigateTo('index/kefu');
			},
			countTotalFee:function(records){
				let fee=records.total_fee-records.activities_fee-records.pay_fee;
				if(fee>0){
					return parseNumber(fee);
				}
				return 0;
			},
			countTotalText:function(records){
				if(records.pay_fee>0){
					return '已付款';
				}
				return '免费';
			},
			change:function(e) {
				this.current = e.detail.current;
			},
			addCars:function(){
				this.$navigateTo('index/addCar');
			},
			makePhone:function(mobile){
				uni.makePhoneCall({
					phoneNumber:mobile
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.top{
	position: absolute;
	display: flex;
	align-items: center;
	width: 500rpx;
	image{
		height: 90rpx;
		//#ifdef MP-ALIPAY
		margin-left: 60rpx;
		//#endif
	}
}
.container{
	margin-top: -250rpx;
	width: 100%;
	z-index: 999;
	.menu{
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 12rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 28rpx;
		margin-bottom: 30rpx;
		.item{
			width: 25%;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	.ad-box{
		width: 92%;
		margin: 0 auto;
		border-radius: 12rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}
	.aboutus{
		padding:30rpx;
		margin-top: 30rpx;
		.title{
			font-weight: bold;
		}
		.content{
			padding-top: 20rpx;
			line-height: 46rpx;
		}
		.hezuo{
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100rpx;
		}
	}
}
.car{
	height: 300rpx;
	.car-item{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: 240rpx;
	}
}
.kefu{
	position: fixed;
	bottom: 20rpx;
	right: 20rpx;
	display: flex;
	flex-direction: column;
	font-size: 28rpx;
	color: #4f4f4f;
	font-weight: bold;
	align-items: center;
	image{
		width: 80rpx;
		height: 80rpx;
	}
	button{
		height: 80rpx;
		border: 0;
		background-color: rgba(0,0,0,0);
		padding: 0;
	}
	button::after{
		border: 0;
	}
}
</style>